<?php
function printNetwork($downline) {
    $list = '<ul>';
    foreach ($downline as $key => $value) {
        if (is_array($value)) {
            $list .= '<li id="'.$key.'">';
            $list .= printNetwork($value);
            $list .= '</li>';
        } else {
            $list .= '<li id="'.$key.'"></li>';
        }
    }
    $list .= '</ul>';
    return $list;
}
?>
<h2>Agent Network</h2>
<form>
<input name="agent" value="<?php echo $this->agent?>"/>
<button type="submit" >View Network</button>
</form>
<hr>
<?php if (count($this->downline)) { ?>
<style>
<!--
#agentNetwork{
	width: 90%;
	text-align: center;
	vertical-align: middle;
}
#agentNetwork ul{
	marker-offset:auto;
	padding-left:100px;
	clear: right;
}
#agentNetwork ul ul{
	margin-bottom:1em;
	padding-top: 0.1em;
}
#agentNetwork li{
	min-height:32px;
	min-width:32px;
	width:35px;
	text-align:center;
	vertical-align:middle;
	clear: right;
	padding-top : 0.1em;
	padding-bottom:0.1em;
	margin-bottom: 0.1em;
	background-image: url("<?php echo $this->baseUrl('images/icons/PNG-32/Profile.png') ?>");
	background-position: center;
	background-repeat: no-repeat;
}
-->
</style>

<div>
<span>Double Click to open list.</span>
</div>
<br/>
<div id="agentNetwork">
<ul id="agentList"><li>You
<?php echo printNetwork($this->downline);?>
</li>
</ul>
</div>
<?php } else {?>
<div>
<span style="font-size: larger;" >"<?php echo $this->agent?>" has not sponsored any agent yet.</span>
</div>
<?php }?>
<script type="text/javascript" language="javascript">
PLUS_IMAGE= '<?php echo $this->baseUrl('images/icons/plus.png')?>';
MINUS_IMAGE='<?php echo $this->baseUrl('images/icons/minus.png')?>';

<?php if (count($this->downline)) { ?>
$(function(){
	var target = $('#agentList > li');
	target.find('li').css('pointer','default')
        .css('list-style-image','none');
	target.find('li:has(ul)')
        .dblclick(function(event){
            if (this == event.target) {
                $(this).css('list-style-image',
                    (!$(this).children().is(':hidden')) ? 'url('+PLUS_IMAGE+')' : 'url('+MINUS_IMAGE+')');
                $(this).children().toggle('slow');
            }
            return false;
        })
        .css({cursor:'pointer', 'list-style-image':'url('+PLUS_IMAGE+')'})
        .children().hide();
	target.find('li:not(:has(ul))').css({cursor:'default', 'list-style-image':'none'});
});
<?php }?>


	<?php 
			/*
target.find('li').click(function(event){
        if (this == event.target) {
    		var id = $(this).attr('id');
    		alert('you clicked: '+id);
        }
	});
			 */
			?>

	

</script>